<template>
		<div class="wrapper">
			
			<!-- header部分 -->
			<header>
				<p>我的订单</p>
			</header>
			
			<!-- 订单列表部分 -->
			<h3>未支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in ordersUnPaidArr" :key="item.orderId">
					<div class="order-info">
						<p>
							{{item.business.businessName}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
							<div class="order-info-right-icon" @click="toPayment">去支付</div>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet==true">
						<li v-for="odItem in item.list " :key="odItem.odId">
							<p>{{odItem.food.foodName}} x {{odItem.food.quantity}}</p>
							<p>&#165;{{odItem.food.foodPrice * odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice}}</p>
						</li>
					</ul>
				</li>
			</ul>
			
			<h3>已支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in ordersPaidArr" :key="item.orderId">
					<div class="order-info">
						<p>
							{{item.business.businessName}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet==true">
						<li  v-for="odItem in item.list " :key="odItem.odId">
							<p>{{odItem.food.foodName}} x {{odItem.food.quantity}}</p>
							<p>&#165;{{odItem.food.foodPrice * odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice}}</p>
						</li>
					</ul>
				</li>
			</ul>
		
		<!-- 底部菜单部分 -->
		<Footer></Footer>
		
	</div>
</template>

<script setup>
	import Footer from '../components/Footer.vue'
	import qs from 'qs';
	//导入路由相关的模块
	import {useRouter,useRoute} from 'vue-router';
	import {ref,inject,computed} from 'vue'
	import {getSessionStorage} from '../common.js'
	
	const axios = inject("axios");
	const router = useRouter();
	const route = useRoute();
	const user = getSessionStorage('user');
	const userId = route.query.userId;
	//未支付订单
	const ordersUnPaidArr = ref([]);
	//已支付订单
	const ordersPaidArr = ref([]);
	
	const init = () => {
		//根据订单编号查询订单信息
		axios.post('OrdersController/listOrdersByUserId', qs.stringify({
			userId:user.userId
		})).then((response) => {
			console.log(response.data);
			let result = response.data;
			for(let obj of result){
				
				//控制详单是否显示
				obj.isShowDetailet = false;
				//未支付订单
				if(obj.orderState == 0){
					ordersUnPaidArr.value.push(obj);
				}
				//已支付订单
				if(obj.orderState == 1){
					ordersPaidArr.value.push(obj);
				}
			}
		}).catch((error) => {
			console.log(error);
		});
	}
	//初始化商家信息
	init();
	
	const detailetShow =(orders)=>{
		orders.isShowDetailet = !orders.isShowDetailet;
	}
	
	const toPayment =()=>{
		router.push({
			path:"/payment"
		});
	}
	
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper{
		width: 100%;
		height: 100%;
	}
	
	/****************** header部分 ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 历史订单列表部分 ******************/
	.wrapper h3{
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}
	.wrapper .order{
		width: 100%;
	}
	.wrapper .order li{
		width: 100%;
	}
	.wrapper .order li .order-info{
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order li .order-info .order-info-right{
		display: flex;
	}
	.wrapper .order li .order-info .order-info-right .order-info-right-icon{
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}
	
	.wrapper .order li .order-detailet{
		width: 100%;
	}
	.wrapper .order li .order-detailet li{
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/****************** 底部菜单部分 ******************/

</style>
